const path = require("path");

const OS = require("os");

const resolve = dir => path.join(__dirname, dir);

console.log("=============================开始编译============================");
console.log(`===当前环境是【${process.env.APP_MODE}】====使用域名=======`, process.env.HOST);
module.exports = {
  // 基本路径
  publicPath: "/",
  // 它支持webPack-dev-server的所有选项
  devServer: {
    open: true, // 自动打开浏览器
    /**
     * 开发过程中使用域名启动webpack时，需要在host文件配置相应域名
     * 如遇到启动失败请先检查自己的host文件是否配置此域名
     * 此处host可配置域名或IP或localhost
     */
    host: process.env.HOST,
    port: 4000, // 端口号
    https: false, // 是否开启HTTPS
    hotOnly: true, // 是否开启热加载
    // 设置代理
    proxy: {
      "/api": {
        target: process.env.TARGET_URL,
        changeOrigin: true,
        secure: true
      }
    },
    before: () => { }
  },
  // 构建输出目录
  outputDir: process.env.outputDir,
  // 静态资源目录 (js, css, img, fonts)
  assetsDir: process.env.assetsDir,
  // 是否开启eslint保存检测，有效值：ture | false | "error"
  lintOnSave: true,
  // 运行时版本是否需要编译
  runtimeCompiler: true,
  // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
  transpileDependencies: ["@vuex-persist"],
  /**
   * 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   *  打包之后发现map文件过大，项目文件体积很大，设置为false就可以不输出map文件
   *  map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
   *  有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
   * */
  productionSourceMap: true,
  /**
   * webpack链接API，用于生成和修改webapck配置
   * 配置路径别名
   * @Author    李杜康
   * @version   [version]
   * @param     {[type]}                 config [description]
   * @return    {[type]}                        [description]
   */
  chainWebpack: (config) => {
    config.resolve.alias.set("@", resolve("src"));
    // 拆包
    config.optimization.splitChunks({
      // 表示哪些代码需要优化，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为async
      chunks: "all",
      // 表示被引用次数，默认为1
      // minChunks: 1,
      // 按需加载时候最大的并行请求数，默认为5
      // maxAsyncRequests: 5,
      // 一个入口最大的并行请求数，默认为3
      maxInitialRequests: Infinity,
      // 表示在压缩前的最小模块大小，默认为30000
      minSize: 300000, // 依赖包超过300000bit将被单独打包
      // 命名连接符
      automaticNameDelimiter: "-",
      // 缓存组。缓存组的属性除上面所有属性外，还有test, priority, reuseExistingChunk
      // reuseExistingChunk 如果当前代码块包含的模块已经有了，就不在产生一个新的代码块
      cacheGroups: {
        vendor: {
          // 用于控制哪些模块被这个缓存组匹配到
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `chunk.${packageName.replace("@", "")}`;
          },
          // 如果当前代码块包含的模块已经有了，就不在产生一个新的代码块
          // reuseExistingChunk:"",
          // 缓存组打包的先后优先级
          priority: 10
        }
      }
    });
  },
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: true,
    // css预设器配置项
    loaderOptions: {}
  },
  // 构建时开启多进程处理babel编译
  parallel: OS.cpus().length > 1,
  // 第三方插件配置
  pluginOptions: {},
  // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {}
};
